<template>
  <div class="main-content">
    <slot />
  </div>
</template>

<script setup lang='ts'>
import { computed } from 'vue'

const props = defineProps({
  /**
  * @description 是否有顶栏
  */
  hasTopbar:{
    type: Boolean,
    default: true,
  },
  /**
  * @description 总高度100% 减去的控制栏 和面包屑高度
  */
  height:{
    type: Number,
    default: 90,
  }
})

const calcHeight = computed(() => {

  if(props.hasTopbar){
    return `calc(100% - ${props.height}px)`
  }else{
    return '100%'
  }

})

</script>
<script lang='ts'>
export default {
  name: 'maint-content'
}
</script>

<style lang="scss" scoped>
@use "/src/assets/scss/color.scss" as colors;
@use "/src/assets/scss/size.scss" as sizes;

// $controlBarHeight:60px;
// $mainContentHeight:calc(100% - $navHeight);
.main-content {
  width: 100%;
  height: v-bind(calcHeight) ;
  background: colors.$c-gray-9;
  // height:sizes.$mainContentHeight
  // overflow-y: auto;
  // position: relative;
}
</style>